<template>
	<div id="search_container" class="page-wrapper">
		<div id="search_header">筛选</div>
		<div class="order-line margin">
			<span>报修单号：
				<input v-model="repairNo"
				:placeholder= "tip.INPUT_NO">
			</span>
		</div>
		<!-- <div class="order-line margin arrow" v-if="type=='dispatcher'">
			<span>报修部门：
				<select v-model="orgId" dir="rtl">
					<option v-for="o in orgs" :value="o.id"
					v-show="o.id">{{o.name}}</option>
				</select>
			</span>
		</div> -->
		<div class="order-line margin" v-if="type !=='repairman'">
			<span>处理人：
				<input v-model='maintainUserName' :placeholder="tip.INPUT_REPAIRMAN">
			</span>
		</div>
		<div class="order-line margin">
			<span>报修人：
				<input v-model='requestUserName' :placeholder="tip.INPUT_USER">
			</span>
		</div>
		<div class="order-line margin arrow"
		@click="$refs.startTime.open()">
			<span class="fl">报修起始时间：</span>
			<span class="fr">{{repairTimeStartStr}}</span>
		</div>
		<div class="order-line margin arrow"
		@click="$refs.endTime.open()">
			<span class="fl">报修终止时间：</span>
			<span class="fr">{{repairTimeEndStr}}</span>
		</div>
		<div class="order-line margin">
			<span>报修位置：
				<input v-model='address' :placeholder="tip.INPUT_LOCATION">
			</span>
		</div>
		<div id="search_btn" class="c-bottom"
		@click="search">
			<img src="static/query.png">
			查询
		</div>
		<!-- 日期选择器 -->
		<mt-datetime-picker
		ref="startTime"
		type="date"
		year-format="{value} 年"
		month-format="{value} 月"
		date-format="{value} 日"
		:startDate="startDate"
		:endDate="endDate"
		@confirm="confirmStart">
		</mt-datetime-picker>
		<mt-datetime-picker
		ref="endTime"
		type="date"
		year-format="{value} 年"
		month-format="{value} 月"
		date-format="{value} 日"
		@confirm="confirmEnd"
		:startDate="startDate"
		:endDate="endDate">
		</mt-datetime-picker>
	</div>
</template>
<script>
import {tip} from './assets/js/tip.js'
import {getUser,getDept} from './assets/js/global.js'
import {loadMore, myHttp, dateToString} from './assets/js/utils.js'
import { DatetimePicker } from 'mint-ui';
export default{
	name: 'search',
	mounted(){
		this.type = this.$route.params.type;
		document.getElementById('search_container').style.height = window.innerHeight + 'px';
		this.tip = tip;
		getUser().then((user) => {
			if(!user) return;
			this.orgId = user.orgIds[0];
		})
		getDept().then((dept) => {
			let depts = [];
			Object.values(dept).forEach((d) => {
				this.orgs.push(d)
			});
		})
	},
	data(){
		return{
			type:'',
			repairNo:'',
			status: [],
			orgId:'',
			maintainUserId: '',
			maintainUserName: '',
			requestUserName:'',
			orgs: [{
				id: '',
				name: tip.SELECT_DEPT
			}],
            repairmen: [{
            	"id": "3",
                "name": "员工",
                "pId": "2",
                "type": "1"
            }],
            repairTimeStartStr:'',
            repairTimeEndStr:'',
            address: '',
            tip:{},
            startDate: new Date('2017-06-1'),
            endDate: new Date()
		}
	},
	methods:{
		search(){
			let sd = {
				status: [],
				maintainUserId: '',
				maintainUserName: this.maintainUserName,
				repairNo: this.repairNo,
				orgId:'',
				address: this.address,
				repairTimeStartStr: this.repairTimeStartStr,
				repairTimeEndStr: this.repairTimeEndStr,
				userId: '',
				requestUserName: this.requestUserName
			}
			switch(this.type) {
				case 'repairman':
					sd.maintainUserId = localStorage.getItem('userId');
					break;
				case 'boss':
					sd.orgId = this.orgId;
					break;
				case 'dispatcher':
					sd.status = ['DISPATCH_S'];
					break;
			}
			localStorage.setItem('searchData', JSON.stringify(sd));
			this.$router.push('/repair/list/search');
		},
		confirmStart(val){
			this.repairTimeStartStr = dateToString(val);
		},
		confirmEnd(val){
			this.repairTimeEndStr = dateToString(val);
		}
	},
	components:{ DatetimePicker }
}
</script>
<style lang='less' scoped>
	#search_container{
		position: relative;
		input,select{
			font-size: 0.37rem;
			color: #333;
			border: none;
			width: 6rem;
			background: #fff;
			-webkit-appearance: none;
			text-align: right;
			float: right;
			&.small{
				width: 6rem;
			}
		}
	}
	#search_header{
		font-size: 0.4rem;
		color: #333333;
		letter-spacing: 0.68px;
		text-align: center;
		height: 1rem;
		line-height: 1rem;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}
	#search_btn{
		position: absolute;
		img{
			vertical-align: -.05rem;
		    width: .5rem;
		    margin-right: .1rem;
		}
	}
</style>